<template>
	<view>
		<view class="classBox" style="line-height: 25px;">
			<view class="classLeft">
				<image :src="classSList.classImg" class="classImg"></image>
			</view>
			<view class="classRight">
				<view class="className" style="line-height: 20px;">
					<text class="u-line-3">{{classSList.className }}</text>
				</view>
			</view>
		</view>
		<view class="commentContain">
			<view class="commentContainItem">
				住宿条件:<u-rate size='30' :count="count" v-model="userRate.tourAccommodation" activeColor="yellow"></u-rate>
			</view>
			<view class="commentContainItem">
				饮食条件:<u-rate size='30' :count="count" v-model="userRate.tourdiet" activeColor="yellow"></u-rate>
			</view>
			<view class="commentContainItem">
				活动安排:<u-rate size='30' :count="count" v-model="userRate.tourActivity" activeColor="yellow"></u-rate>
			</view>
			<view class="commentContainItem">
				人文环境:<u-rate size='30' :count="count" v-model="userRate.culturalEnvironment" activeColor="yellow"></u-rate>
			</view>
			<view style="margin-top: 120rpx;">
				
			<u--textarea v-model="userComment" placeholder="请输入内容" count='true' maxlength="60"
				border="bottom"></u--textarea>
				</view>
		</view>
		<view style="margin-top: 40rpx; float: right;box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); margin-right: 10rpx;" >
			<u-button color="#62d8d6" throttleTime='1000'  text="提交评论" @click="submitComment()"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count: 5,
				orderId: null,
				orderActivityId: null,
				classSList: {
					className: '',
					classImg: '',
					activityId: null
				},
				userComment: "",
				// 用户打分
				userRate: {
					// 住宿条件
					tourAccommodation: 0,
					// 饮食条件
					tourdiet: 0,
					// 活动安排
					tourActivity: 0,
					// 服务质量
					ServiceQuality: 0,
					//人文环境
					culturalEnvironment: 0
				}
			}
		},
		onLoad: function(obj) {
			this.orderId = obj.orderId
			this.orderActivityId = obj.activityId
			this.getActivity(obj.activityId)
		},
		methods: {
			submitComment() {
				uni.$u.http.post('/user/comment/commentOrder', {
						content: this.userComment,
						orderId: this.orderId
					},{
						custom: {auth: true}
					}).then(res=>{
						console.log(res);
						if(res.code==1){
							return uni.showToast({
								title:'评论成功',
								icon:'success',
								duration:500
							})
						}else{
							return uni.showToast({
								title:'评论失败',
								icon:'error',
								duration:500
							})
						}
						
					}).catch(err=>{
						return uni.showToast({
							title:'遇到错误',
							icon:'error',
							duration:500
						})
					}).finally(()=>{
						uni.switchTab({
							url:'/pages/my/my'
						})
					})
					},
					async getActivity(activityId) {
						const res = await uni.$u.http.get("/user/activity/getActivityDetail/" + activityId, {
							custom: {
								auth: true
							}
						})

						this.classSList.className = res.data.data.activityName
						this.classSList.classImg = res.data.data.activityImagePath[0].imgSrc
						this.classSList.activityId = activityId
					}
			}
		}
</script>

<style lang="scss" scoped>
	.classBox {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-around;
		width: 100%;
		background-color: ghostwhite;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

		.classLeft {
			flex: 1;
			width: 100px;
			height: 100px;
			padding: 10px;

			.classImg {
				width: 100%;
				height: 100%;
			}
		}

		.classRight {
			flex: 2;
			margin: 10px;
			font-size: 15px;
		}

		.classDate {
			font-size: 14px;
		}
	}

	.commentContain {
		margin-top: 40rpx;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
		.commentContainItem{
			margin-top: 20rpx;
		}
	}
</style>